﻿<script>

    if (typeof jQuery == 'undefined') {
        //alert('1');

    }
    else {
        jQuery.getScript("~sys/toolpart/1.0.0.0/app.js", function () {

            var appPicker = new spdevlab.jsappwebpart.ApplicationPicker();
            appPicker.init('~appproperties', '~app-result-id'); ;

        });
    }
   
</script>
<div id='~toolpartid-app-selector' style="display: none">
    <style>
        .borderContainer
        {
            border: 1px #dedede solid;
            padding: 10px;
            margin: 5px;
            text-align: left;
        }
        
        .mainContainer
        {
            overflow: auto;
            overflow-y: visible;
            overflow-x: hidden;
            height: 385px;
        }
        
        .app-itemConainer
        {
            border: 1px #91cdf2 solid;
            padding: 10px;
            margin: 5px;
            width: 192px;
            height: 96px;
            float: left;
        }
        
        .app-itemHr
        {
            border: 0px;
            color: #dedede;
            height: 2px;
            background-color: #dedede;
        }
        
        .js-wp-app-search
        {
            width: 250px;
        }
        
        .app-image
        {
            width: 64px;
            height: 64px;
        }
    </style>
    <div>
        <div class="borderContainer">
            Search application:
            <input class="js-wp-app-search" type="text" data-bind="value: searchAppsString, valueUpdate: 'afterkeydown'">
        </div>
        <div data-bind="foreach: activeApps" class="mainContainer">
            <div class="app-itemConainer" data-bind="click: $parent.onSelectApp, style: { backgroundColor: isSelected() > 0 ? '#E6E6FA' : 'white'}">
                <b><span data-bind="text: title"></span></b>
                <hr class="app-itemHr" />
                <div style="width: 100%; margin-top: 10px; vertical-align: top" class="test" data-bind="attr: { 'class': itemClass }">
                    <div class="app-description" style="float: left; width: 120px" data-bind="html: metaDescription">
                    </div>
                    <div style="float: left">
                        <img class="app-image" data-bind="attr: { 'src': metaImgUrl}" />
                    </div>
                </div>
            </div>
        </div>
        <div style="clear: both">
        </div>
        <div style="border: 1px #dedede solid; padding: 10px; margin: 5px; text-align: right">
            <input type="button" value="save" data-bind="click: onSelectAppSave" class="ms-ButtonHeightWidth" />
            <input type="button" value="cancel" data-bind="click: onSelectAppCancel" class="ms-ButtonHeightWidth" />
        </div>
    </div>
</div>
<div class='js-app-part-cnt' id='~toolpartid-tool-selector'>
    <table cellspacing='0' cellpadding='0' border='0' style='width: 100%; border-collapse: collapse;'>
        <tr>
            <td>
                <div class='UserSectionHead'>
                    Js Application
                </div>
                <div class='UserSectionBody'>
                    <div class='UserControlGroup'>
                        <table cellpadding='0' cellspacing='0' border='0' style='width: 100%; table-layout: fixed;'>
                            <tr>
                                <td>
                                    <input disabled="disabled" type='text' data-bind="value: appTitle, valueUpdate: 'afterkeydown'"
                                        class='js-app-part-app-title UserInput' style='width: 176px; direction: ltr;' />
                                    <a href='#' data-bind="click: showJsAppSettings" class='js-app-part-app-title-selector'>
                                        <img title='Browse' src='/_layouts/images/addressbook.gif' alt='Browse' style='border-width: 0px;'>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
